<template>
  <div class="task_etting">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto">
      <el-form-item label="休眠时段">
        <el-switch v-model="formData.SleepTimeEnable" />
      </el-form-item>
      <template v-if="formData.SleepTimeEnable">
        <el-form-item label=" ">
          <el-from-item>
            <el-time-picker style="width: 150px" v-model="formData.SleepTimeRange[0]" :default-value="new Date(0, 0, 0, 0, 0, 0)" placeholder="00:00:00" value-format="HH:mm:ss" format="HH:mm:ss" />
          </el-from-item>
          <div style="padding: 0 5px"> — </div>
          <el-from-item>
            <el-time-picker style="width: 150px" v-model="formData.SleepTimeRange[1]" :default-value="new Date(0, 0, 0, 0, 0, 0)" placeholder="00:00:00" value-format="HH:mm:ss" format="HH:mm:ss" />
          </el-from-item>
        </el-form-item>
        <div class="desc">{{ `每日至${formData.SleepTimeRange[0] || '00:00:00'}至${formData.SleepTimeRange[1] || '00:00:00'}期间不发送` }}</div>
        <el-form-item label=" ">
        <el-checkbox v-model="formData.SkipHolidayEnable" label="跳过法定节假日" name="type" />
      </el-form-item>
      </template>
      <el-form-item label="添加上限">
        <div class="apply">
          <div class="apply_name">每日</div>
          <el-input-number v-model="formData.UpperLimitDaily" :min="1" :controls="false" />
          <div class="apply_last">次</div>
        </div>
      </el-form-item>
      <!-- <div class="desc">建议设置一个相对合理的数字，避免添加频繁导致封号</div> -->
      <el-form-item label="添加间隔">
        <el-input-number v-model="formData.Interval[0]" :min="1" :controls="false"></el-input-number>
        <div class="time_padding"> 秒 —</div>
        <el-input-number v-model="formData.Interval[1]" :min="1" :controls="false"></el-input-number>
        <div class="time_padding"> 秒 </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="onRouteBack">取消</el-button>
        <el-button type="primary" @click="onSubmit(formRef)">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
  import { settingsMakeGroupFriend, showSettingsMakeGroupFriend } from '@renderer/ajax/api/addGroupBuddy'
  import { dateFormat } from '@renderer/utils/utils'
  import { reactive, ref, watch, onMounted } from 'vue'
  import { ElMessage, FormInstance, FormRules } from 'element-plus'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const formRef = ref<FormInstance>()
  const state = reactive({
    date1: '',
    date2: ''
  })
  const formData = reactive({
    SleepTimeEnable: true, // 休眠时段
    SleepTimeRange: ['21:00:00', '09:00:00'], // 休眠时段时间
    SkipHolidayEnable: false, // 跳过节假日
    UpperLimitDaily: 100, //每日上限
    Interval: [10, 60] // 添加间隔
  })

  const rules = reactive<FormRules>({
    SleepTimeEnable: [{ required: true, message: '请选择休眠时段', trigger: 'change' }],
    date1: [{ required: true, message: '请选择时间', trigger: 'change' }],
    date2: [{ required: true, message: '请选择时间', trigger: 'change' }],
    UpperLimitDaily: [{ required: true, message: '请输入上限', trigger: 'change' }],
    Interval: [{ required: true, message: '请输入间隔', trigger: 'change' }]
  })
  const onRouteBack = () => {
    router.back()
  }
  const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        const params = JSON.parse(JSON.stringify(formData))
        settingsMakeGroupFriend(params).then((res: any) => {
          ElMessage.success('任务设置成功')
          onRouteBack()
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  const onLook = async () => {
    const res: any = await showSettingsMakeGroupFriend()
    formData.SleepTimeEnable = res.SleepTimeEnable
    formData.SleepTimeRange = res.SleepTimeRangeString
    formData.SkipHolidayEnable = res.SkipHolidayEnable
    formData.UpperLimitDaily = res.UpperLimitDaily
    formData.Interval = res.Interval
  }
  onMounted(() => {
    onLook()
  })
</script>

<style scoped lang="scss">
  .desc {
    padding-left: 70px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #999;
  }

  .time_padding {
    padding: 0 5px;
  }

  .task_etting {
    padding: 20px;
    background: #fff;

    .apply {
      display: flex;

      .apply_name {
        min-width: fit-content;
        margin-right: 5px;
      }

      .apply_last {
        margin-left: 5px;
      }
    }
  }
</style>
